<template>
  <div>
    <el-upload
      class="upload-box"
      :action="action"
      multiple
      :limit="5"
      :on-success="handleUploadSuccess"
      :on-exceed="handleExceed"
      :file-list="fileList"
    >
      <el-button v-if="showUpload" size="small" type="primary">点击上传</el-button>
      <div slot="file" slot-scope="{file}" class="file-item">
        <span v-show="!file.showEdit" class="file-name">{{ file.name }}</span>
        <span v-show="file.showEdit" class="file-name">
          <el-input v-model="file.name" size="mini" @blur="saveEdit(file)" /></span>
        <span class="option-box">
          <span
            v-show="showRemove"
            class="option-icon"
            @click="handleRemove(file,fileList)"
          >
            <i class="el-icon-delete" />
          </span>
          <span
            v-show="showEdit"
            class="option-icon"
            @click="handleEdit(file)"
          >
            <i class="el-icon-edit" />
          </span>
          <span
            class="option-icon"
            @click="handleDownload(file)"
          >
            <i class="el-icon-download" />
          </span>
          <span
            class="option-icon"
            @click="handlePreview(file)"
          >
            <i class="el-icon-zoom-in" />
          </span>
        </span>
      </div>
      <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
    </el-upload>
  </div>
</template>
<script>
export default {
  props: {
    action: {
      type: String,
      default: () => `/ads-admin/api/v1/adsEnclosureInfo/uploadFile` // 附件默认上传路径
    },
    showUpload: {
      type: Boolean,
      default: true
    },
    showEdit: {
      type: Boolean,
      default: true
    },
    showRemove: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 文件上传成功
    handleUploadSuccess(res, file, fileList) {
      this.$emit('upload-success', res.data)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handleEdit(file) {
      file.showEdit = !file.showEdit
    },
    handleDownload(file) {
    },
    handlePreview(file) {
      console.log(file)
    },
    saveEdit(file) {
      file.showEdit = !file.showEdit
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    }
  }
}
</script>
<style lang="scss" scoped>
.upload-box{
  width: 400px;
  min-height: 120px;
  margin-top: 20px;
}
/deep/.el-upload-list__item.is-success .el-upload-list__item-status-label {
    display: none;
}
/deep/.el-upload-list__item:hover .el-icon-close{
  display: none;
}
.file-item{
  display: flex;
  justify-content: space-between;
  .file-name{
    width: 200px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .option-box{
    .option-icon{
      padding: 0 10px;
    }
    :hover{
      color: $--color-primary;
      cursor: pointer;
    }
  }
}
</style>
